<template>
  <scroll-view class="message-approval-wrapper" :scroll-y="true">
    <view class="message-approval-top-time">10:22</view>
    <view class="message-approval-top-view">
      <image
        src="http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg"
        class="message-approval-top-image"
      />
      <view class="message-approval-top-content-background">
        <view class="message-approval-top-title">{{approvalTopMessage.content}}</view>
      </view>
    </view>
    <view v-if="approvalMessage.length >0 " class="message-approval-list-data background">
      <view
        v-for="(item,pos) in approvalMessage"
        :key="item"
        :index="pos"
        :item="item"
        class="message-approval-list-data"
      >
        <view class="message-approval-list-data-time">{{item.showTime}}</view>
        <view class="message-approval-list-data-backview">
          <view class="message-approval-list-data-title">{{item.title}}</view>
          <view class="message-approval-list-data-list type">{{item.type}}</view>
          <view class="message-approval-list-data-list reason">{{item.reason}}</view>
          <view class="message-approval-list-data-list detail">{{item.detail}}</view>
          <!-- 0报销已同意 1 报销通过 2费用申请 3驳回 -->
          <view v-if="item.status == 0" class="message-approval-list-bottomview agree">
            <view class="message-approval-list-line"></view>
            <view class="message-approval-list-agree">已同意</view>
          </view>
          <view v-if="item.status == 2" class="message-approval-list-bottomview choose">
            <view class="message-approval-list-line"></view>
            <view class="message-apprvol-list-choose-bottomview">
              <view class="message-apprvoal-list-choose agree" @click="itemClick(item,0)">同意</view>
              <view class="message-clock-list-content-line"></view>
              <view class="message-apprvoal-list-choose reject" @click="itemClick(item,1)">驳回</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>
<script>
export default {
  data() {
    return {
      approvalTopMessage: {
        content:
          "欢迎使用审批提醒，当你提交的审批流程有更新，或需要你审批流程时，我会马上通知你。"
      },
      approvalMessage: [
        {
          title: "陈晓晓的报销申请",
          type:
            "【报销类型】其他其他其他其他其他当你提交的审批流程醒，当你提交的审批流程有更新，或需要你审批流程时，我会马上通知你",
          reason: "【报销事由】无",
          detail: "【报销明细】无",
          showTime: "17:22",
          status: 0
        },
        {
          title: "你的报销申请已通过",
          type: "【报销类型】其他",
          reason: "【报销事由】无",
          detail: "【报销明细】无",
          showTime: "17:22",
          status: 1
        },
        {
          title: "陈晓晓的费用申请",
          type: "【报销类型】其他",
          reason: "【报销事由】无",
          detail: "【报销明细】无",
          showTime: "17:22",
          status: 2
        },
        {
          title: "李晓晓驳回了你的报销申请",
          type:
            "【报销类型】其他李晓晓驳回了你的报销申请李晓晓驳回了你的报销申请李晓晓驳回了你的报销申请",
          reason: "【报销事由】无",
          detail:
            "【报销明细】无李晓晓驳回了你的报销申请李晓晓驳回了你的报销申请李晓晓驳回了你的报销申请李晓晓驳回了你的报销申请",
          showTime: "17:22",
          status: 1
        }
      ]
    };
  },
  methods: {
    itemClick(item, index) {
      if (index === 0) {
        item.status = 0;
      } else if (index === 1) {
        item.status = 1;
      }
    }
  }
};
</script>

<style lang="scss">
.message-approval-wrapper {
  background-color: #fafbfb;
  margin-bottom: 30px;
}
.message-approval-top-time {
  color: #c0c0c0;
  font-size: 12px;
  text-align: center;
  padding-top: 14px;
}
.message-approval-top-view {
  padding-left: 0px;
  margin-top: 14px;
  display: flex;
  .message-approval-top-image {
    margin-top: 0px;
    margin-left: 10px;
    height: 40px;
    width: 40px;
    border-radius: 20px;
  }
  .message-approval-top-content-background {
    flex: 1px;
    padding-left: 7px;
    margin-right: 70px;
    background-color: white;
    .message-approval-top-title {
      font-size: 14px;
      color: #252525;
      padding-top: 12px;
      padding-left: 17px;
      padding-right: 12px;
      padding-bottom: 12px;
    }
  }
}
.message-approval-list-data {
  margin-top: 24px;
  &.background {
    display: block;
    margin-top: 0px;
    padding-left: 0px;
    padding-top: 0px;
  }
  .message-approval-list-data-time {
    color: #c0c0c0;
    font-size: 12px;
    text-align: center;
    padding-top: 0px;
  }
  .message-approval-list-data-backview {
    background-color: white;
    margin-top: 14px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
    border-radius: 4px;
    .message-approval-list-data-title {
      padding-left: 22px;
      padding-top: 16px;
      color: #252525;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
    }
    .message-approval-list-data-list {
      padding-left: 16px;
      color: #333333;
      font-size: 14px;
      &.type {
        padding-top: 6px;
      }
      &.reason {
        padding-top: 2px;
      }
      &.detail {
        padding-bottom: 16px;
      }
    }
    .message-approval-list-bottomview {
      background-color: white;
      padding-top: 0px;
      height: 44px;
      display: block;

      .message-approval-list-line {
        background-color: #d8d8d8;
        height: 0.5px;
        margin-left: 16px;
        margin-right: 16px;
      }
      .message-approval-list-agree {
        color: #c0c0c0;
        font-size: 14px;
        padding-top: 12px;
        text-align: center;
      }
      .message-apprvol-list-choose-bottomview {
        display: flex;
        .message-apprvoal-list-choose {
          flex: 1px;
          color: $theme;
          font-size: 14px;
          text-align: center;
          padding-top: 12px;
        }
        .message-clock-list-content-line {
          background-color: #d8d8d8;
          margin-top: 8px;
          height: 22px;
          width: 0.5px;
        }
      }
    }
  }
}
</style>